<template>
  <!-- 发现 -->
  <Top-Page>
    <view class="field" v-for="item in table" :key="item.title" @click="toDetail(item.path)">
      <image class="field__left-icon" :src="item.icon" mode="aspectFill" />
      <view class="field-content">
        <view class="field-label">{{ item.title }}</view>
        <view class="arrow-left arrow-right"></view>
      </view>
    </view>
  </Top-Page>
</template>

<script>
export default {
  data() {
    return {
      table: [
        // {
        // 	title: "搭子社交",
        // 	icon: "../../static/image/discover/ptfw.png",
        // 	path: "",
        // },
        {
          title: "好物分享",
          icon: "../../static/image/discover/hwfx.png",
          path: "/pages/shop-mall/shop-menu"
        },
        {
          title: "附近的人",
          icon: "../../static/image/discover/dw.png",
          path: "/pages/nearby/index"
        },
        {
          title: "人才库",
          icon: "../../static/image/discover/z.png",
          path: "/pages/recruit/index/index"
        },
        {
          title: "趣圈",
          icon: "../../static/image/discover/ququan.png",
          path: "/pages/discover/interest_group"
        },
        {
          title: "深度",
          icon: "../../static/image/discover/ai.png",
          path: "/pages/discover/ai"
        },
        {
          title: "一卡通折扣",
          icon: "../../static/image/discover/yktzk.png",
          path: ""
        },
        {
          title: "共享天下",
          icon: "../../static/image/discover/gxtx.png",
          path: ""
        }
      ]
    };
  },
  methods: {
    toDetail(path) {
      path
        ? uni.navigateTo({
            url: path
          })
        : uni.showToast({
            title: "敬请期待",
            icon: "none"
          });
    }
  }
};
</script>

<style lang="scss" scoped>
.arrow-right {
  transform: rotate(225deg);
  border-color: #999;
}

.field {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 40rpx;
  background-color: #fff;

  &:first-child {
    margin-top: calc(var(--amplified_base) * 20rpx);
  }

  .field__left-icon {
    width: calc(var(--amplified_base) * 48rpx);
    height: calc(var(--amplified_base) * 48rpx);
    flex-shrink: 0;
  }

  .field-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 32rpx;
    padding: 32rpx 0;
    border-bottom: 1rpx solid #f4f4f4;

    .field-label {
      font-size: calc(var(--amplified_base) * 32rpx);
      color: #000;
    }
  }
}
</style>
